<template>
	<view class="cartbox">

		<!-- 购物车列表 -->
		<u-transition mode="slide-up" :show="show">
			<view class="transition cart-list">
				<view class="title fw-bt">
					<view class="f-w" @click="checkAll">
						<view class="icon1">
							<image src="https://jw.xzsw2021.com/static/client/icon_97@2x.png" mode="" v-if="!allChoose">
							</image>
							<image src="https://jw.xzsw2021.com/static/client/icon_98@2x.png" mode="" v-else></image>
						</view>
						<view class="t1 f28">全选{{carnum?`(已选${carnum}件商品)`:''}}</view>
					</view>
					<!--  -->
					<view class="f-w">
						<block v-if="showcoupon!='no'">
							<view class="icon2" @click="getQuan">
								<view>优惠券</view>
							</view>
							<view class="bg1"></view>
						</block>

						<view class="f24 c999" @click="clearCart">清空购物车</view>
					</view>
				</view>
				<!-- 列表 -->
				<view class="cart-list2">
					<text @click="goaddr"
						style="width: 100%;display: flex;justify-content: flex-start;font-size: 24rpx;">{{address?'送至:'+address.address:'未选择配送地址'}}</text>
					<view class="list2-demo f-w" v-for="(item,index) of list2" :key="index" v-if="item.cart_num>0">
						<view class="icon1" @click="checkChoose(index)">
							<image src="https://jw.xzsw2021.com/static/client/icon_97@2x.png" mode=""
								v-if="!item.check"></image>
							<image src="https://jw.xzsw2021.com/static/client/icon_98@2x.png" mode="" v-else></image>
						</view>
						<view class="demo-right f-w">
							<view class="card-img f-w">
								<image :src="item.productAttr.image" mode=""></image>
							</view>
							<!-- 商品详细 -->
							<view class="card-right">
								<view class="one f28 hide-line">{{item.product.store_name}}</view>
								<view class="one f28 hide-line" style="color: indianred;font-size: 10px;">
									{{item.productAttr.sku}}</view>
								<view class="four fw-bt">
									<!-- 价格 -->
									<view class="four-left f-w">
										<view class="price1 f28 bold">￥{{item.productAttr.price}}</view>
										<view class="price2" v-if="item.ActiveSku.ot_price">
											￥{{item.ActiveSku.ot_price}}</view>
									</view>
									<!-- 购物-->
									<view class="cart1 f-w" style="position: relative;z-index: 999;">
										<view class="cart1-jian f-w" @click.stop="cartAdd(index,-1)"
											style="position: relative;z-index: 999;justify-content: flex-end;">
											<image src="https://jw.xzsw2021.com/static/client/icon_83@2x.png" mode="">
											</image>
										</view>
										<input type="number" :value="item.cart_num" disabled>
										<view class="cart1-add f-w" @click.stop="cartAdd(index,1)"
											style="position: relative;z-index: 999;justify-content: flex-start;">
											<image src="https://jw.xzsw2021.com/static/client/icon_84@2x.png" mode="">
											</image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-transition>
		<!-- 底部 -->
		<view class="bottom fw-bt">
			<view class="left f-w">
				<!-- 数量 -->
				<view class="num" @click="showCartList">
					<image src="https://jw.xzsw2021.com/static/client/icon_85@2x.png" mode=""></image>
					<view class="tag">{{carnum}}</view>
				</view>
				<!-- 现价 -->
				<view class="price1">
					￥<text class="f36 bold">{{carprice.toFixed(2)}}</text>
				</view>
				<view class="price2" v-if="otprice.toFixed(2) > carprice.toFixed(2)">
					￥{{otprice.toFixed(2)}}
				</view>
				<!-- 原价 -->
			</view>
			<!-- 立即购买 -->
			<template v-if="product">
				<template v-if="product.product_type == 1">
					<!-- 秒杀 -->
					<view class="btn" v-if="product.seckill_status == -1">已结束</view>
					<view class="btn" v-else-if="product.seckill_status == 0">未开始</view>
					<!-- <view class="btn" @click="activityProudctShop" v-else>秒杀购买</view> -->
					<rules :product='product2' v-else shop >
						<view class="btn">秒杀购买</view>
					</rules>
				</template>
				<template v-else-if="product.product_type == 4">
					<!-- 拼团商品 -->
					<view class="btn" @click="buy">拼团购买</view>
				</template>
				<template v-else>
					<view class="btn" @click="buy" v-if="show">立即购买</view>
					<rules :product='product2' shop v-show="!show">
						<view class="btn">立即购买</view>
					</rules>
				</template>
			</template>
			<template v-else>
				<view class="btn" @click="buy">立即购买</view>
			</template>
		</view>
		<!-- 遮罩层 -->
		<u-transition mode="slide-up" :show="show">
			<view class="mask" v-if="show" @click="cancel">
			</view>
		</u-transition>
		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	import {
		addCartApi,
		getCartApi
	} from '@/api/cart'
	import {
		orderCheckApi
	} from '@/api/order.js'
	import {
		rules
	} from '@/components/rules.vue'

	import Cache from '@/util/cache.js'
	export default {
		name: "cart",
		components: {
			rules
		},
		data() {
			return {
				list2: [],
				carnum: 0,
				carprice: 0,
				product2: {},
				address: '',
				otprice: 0,
				show: false, // 弹起购物车详情
				allChoose: false, //全选
				isShowProductSelectSku: true //是否显示 商品下拉选择属性 。选择购买数量
			};
		},
		props: ['list', 'product', 'group_buying_id', 'showcoupon'], //proudct 当前查看的商品 ，group_buying_id去拼团时 其他团的团长id
		watch: {
			product(val, oldVal) {
				if (val) {
					this.product2 = val
				}
			},
			list(e) {
				this.list2 = e
				let bool = this.list2.every(item => {
					return item.check
					// return item.check && item.isRange
				})
				if (bool) {
					this.allChoose = true
				} else {
					this.allChoose = false
				}
				this.countmoney()
			},
			show(e) {
				if (Cache.get('user_address', true) !== true) {
					this.address = Cache.get('user_address', true)
				}
			}
		},
		mounted() {
			if (Cache.get('user_address', true) !== true) {
				this.address = Cache.get('user_address', true)
			}
		},
		methods: {
			activityProudctShop() {
				let This = this
				let type = this.product.product_type
				if (this.isShowProductSelectSku == false) {
					this.isShowProductSelectSku = true
					return;
				}
				let cacheCheck = 'cartToPayCheck' //缓存
				let cartData = {
					product_type: type,
					product_id: this.product.product_id,
					product_attr_unique: this.product.sku[""].unique,
					is_new: 1,
					cart_num: 1 //购买数量
				}
				if (type == 4) { //拼团订单
					cartData.group_buying_id = this.group_buying_id ? this.group_buying_id : 0 //是否去拼团
				}
				addCartApi(cartData).then(res => {
					let checkData = {
						address_id: "", //收货id
						cart_id: [res.data.cart_id], //购物车id
						takes: [],
						use_integral: false, //是否使用积分抵扣
						use_coupon: []
					}
					// checkData.use_coupon[This.product.merchant.mer_id] = [] //优惠券
					console.log(res, '创建购物车完成')
					console.log(checkData)
					return orderCheckApi(checkData)
				}).then(res => {
					console.log(res, '创建校验单完成')
					Cache.set('cartToPayCheck', res.data.order[0].list)
					uni.navigateTo({
						url: "/pages/client/order/order-sure/order-sure"
					})
				}).catch(err => {
					console.log(err, '失败')
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},

			countmoney() {
				let num = 0
				let num2 = 0
				let num3 = 0
				let list = this.list2
				console.log(list)
				list.forEach(item => {
					if (item.check && item.isRange) {
						num = num + item.cart_num * 1 * (item.ActiveSku.price * 1)
						num2 = num2 + item.cart_num * 1
						num3 = num3 + item.cart_num * 1 * (item.ActiveSku.ot_price * 1)
					}
					this.carprice = num
					this.carnum = num2
					this.otprice = num3
				})
			},
			goaddr() {
				this.show = false
				uni.navigateTo({
					url: "/pages/client/address-choose/address-choose?orgin=1"
				})
			},
			buy() { //立即购买
				if (this.show == false && this.product) { //弹起购物车支付购物车的，未弹起且有商品详情的支付当前商品
					console.log('立即购买当前商品')
					//不需要弹出选择购买数量啊？
					let addCartData = {
						cart_num: 1,
						is_new: 0,
						product_attr_unique: this.product.sku[''].unique,
						product_id: this.product.product_id
					}
					addCartApi(addCartData).then(res => {
						Cache.set('cartToPayCheck', res.data.cartProduct)
						uni.navigateTo({
							url: `/pages/client/order/order-sure/order-sure`,
							fail: (res) => {
								console.log(res)
							}
						})
					}).catch(err => {

					})
					return;
				}

				let cart = []
				this.list2.forEach(cartInfo => {
					if (cartInfo.check && cartInfo.isRange && cartInfo.cart_num) {
						cart.push(cartInfo)
					}
				})
				if (cart.length) {
					Cache.set('cartToPayCheck', cart)
					uni.navigateTo({
						// url: "/pages/client/order/order-sure/order-sure?arr=" +JSON.stringify(cart)
						// url: "/pages/client/order/order-sure/order-sure?arr=" + Base64.encode(JSON.stringify(cart))
						url: "/pages/client/order/order-sure/order-sure"
					})
				} else {
					this.$refs.uToast.show({
						type: 'default',
						icon: false,
						// title: '失败主题',
						message: "请选择需要购买的物品",
						iconUrl: ''
					})
				}
			},
			// 购物车列表
			showCartList() {
				this.show = !this.show;
				console.log(this.product2, '显示购物车列表');
			},
			// 全选
			checkAll() {
				console.log(this.list2)
				this.allChoose = !this.allChoose;
				if (this.allChoose) {
					this.list2.forEach((item => {
						if (item.isRange) {
							item.check = true
						} else {
							item.check = false
						}
					}))
				} else {
					this.list2.forEach((item => {
						item.check = false;
					}))

				}
				this.countmoney()
			},
			// 单个商品选中切换
			checkChoose(index) {
				let list = this.list2
				let item = list[index]
				if (item.isRange) {
					item.check = !item.check
				} else {
					item.check = false
					this.$refs.uToast.show({
						type: 'default',
						icon: false,
						// title: '失败主题',
						message: "不在当前配送范围内",
						iconUrl: ''
					})
					return;
				}
				this.list2 = list
				this.$forceUpdate()

				let bool = this.list2.every(item => {
					return item.check
				})
				if (bool) {
					this.allChoose = true
				} else {
					this.allChoose = false
				}
				this.countmoney()
			},
			// 购物车加
			cartAdd(index, num) {
				let list = this.list2
				let item = list[index]
				uni.showLoading({
					mask: true
				})
				this.$request('user/cart/change/' + item.cart_id, {
					cart_num: item.cart_num * 1 + num
				}).then(res => {
					if (res.status == 200) {
						uni.hideLoading()
						item.cart_num = item.cart_num * 1 + num
						list[index] = item
						this.list2 = list
						this.countmoney()
					}
				})
			},
			cancel() {
				this.show = false
				this.$emit('change', this.list2)
			},
			// 领优惠券
			getQuan() {
				this.show = false;
				// this.$refs.cpopup.open();
				uni.$emit('openCoupons', {
					msg: '弹起来'
				})
			},
			// 清空购物车
			clearCart() {
				let list = this.list2
				let i = []
				console.log(list)
				list.forEach(item => {
					if (item.check) {
						i.push(item.cart_id)
						item.cart_num = 0
					}
				})
				this.$request('user/cart/delete', {
					cart_id: i
				}).then(res => {
					this.countmoney()
					this.$forceUpdate()
					this.$emit('change', [])
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cartbox {
		.red {
			color: #F83535;
		}

		.myimg {
			width: 100%;
			height: 100%;
		}

		position: fixed;
		left: 0;
		bottom: 0;
		width: 750rpx;
		min-height: 130rpx;
		z-index: 110;

		.bottom {
			position: relative;
			width: 750rpx;
			height: 130rpx;
			padding: 0 20rpx 0 28rpx;
			background: #FFFFFF;
			border-top: 1rpx solid #eee;
			box-sizing: border-box;
			z-index: 112;

			.left {
				.num {
					position: relative;
					width: 70rpx;
					height: 70rpx;

					image {
						width: 100%;
						height: 100%;
					}

					.tag {
						position: absolute;
						right: -13rpx;
						top: 0;
						width: 40rpx;
						height: 40rpx;
						// padding: 10rpx;
						line-height: 40rpx;
						text-align: center;
						background: #F83535;
						border-radius: 50%;
						color: #fff;
						font-size: 22rpx;
					}
				}

				.price1 {
					margin-left: 18rpx;
					font-size: 22rpx;
				}

				.price2 {
					margin-top: 10rpx;
					margin-left: 15rpx;
					font-size: 24rpx;
					color: #999;
					text-decoration: line-through;
				}
			}

			.btn {
				width: 260rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #fff;
				background: linear-gradient(64deg, #2BCCA5, #22B591);
				border-radius: 45rpx;
			}

		}

		.cart-list {
			position: relative;
			width: 750rpx;
			height: 837rpx;
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			background-color: #fff;
			box-sizing: border-box;
			z-index: 111;

			.title {
				.icon1 {
					margin-right: 15rpx;
					width: 36rpx;
					height: 36rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.icon2 {
					position: relative;
					width: 90rpx;
					height: 34rpx;
					line-height: 34rpx;
					text-align: center;
					font-size: 24rpx;
					color: #F83535;
					background: url('https://jw.xzsw2021.com/static/client/icon_99@2x.png') no-repeat;
					background-size: 100% 100%;
				}

				.bg1 {
					margin: 0 10rpx;
					width: 2rpx;
					height: 16rpx;
					background: #999999;

				}

			}

			.cart-list2 {
				padding: 30rpx 0;
				height: 710rpx;
				overflow-y: auto;

				.list2-demo {
					padding: 30rpx 0;
					border-bottom: 1rpx solid #eee;

					.icon1 {
						margin-right: 15rpx;
						width: 36rpx;
						height: 36rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.demo-right {
						flex: 1;

						.card-img {
							flex-shrink: 0;
							width: 130rpx;
							height: 130rpx;

							image {
								@extend .myimg;
								border-radius: 12rpx;
							}
						}

						.card-right {
							position: relative;
							flex: 1;
							margin-left: 15rpx;
							min-height: 130rpx;

							.one {
								width: 496rpx;
							}

							.two {
								margin: 8rpx 0;
								color: #666;
								font-size: 22rpx;
							}

							.three {
								width: 120rpx;
								height: 32rpx;
								line-height: 32rpx;
								text-align: center;
								font-size: 20rpx;

								color: #AF1919;
								background: rgba(16, 156, 122, 0);
								border: 1rpx solid #AF1919;
							}

							.four {
								position: absolute;
								right: 0;
								bottom: -4rpx;
								width: 496rpx;
								height: 40rpx;

								.price1 {
									color: #F83535;
								}

								.price2 {
									margin-left: 10rpx;
									color: #999;
									font-size: 26rpx;
									text-decoration: line-through;
								}

								.cart1 {
									input {
										width: 60rpx;
										font-weight: 600;
										text-align: center;
									}

									.cart1-jian,
									.cart1-add {
										width: 80rpx;
										height: 80rpx;
										display: flex;
										align-items: center;
										justify-content: center;
										position: relative;
										z-index: 99;

										image {
											width: 40rpx;
											height: 40rpx;
										}
									}
								}
							}
						}
					}
				}
			}
		}

		.mask {
			width: 100%;
			height: 100vh;
			background: rgba(0, 0, 0, 0.5);
			z-index: 99;
			position: fixed;
			left: 0;
			top: 0;
		}

		.pop {
			// position: relative;
			margin-bottom: 130rpx;
			width: 750rpx;
			height: 745rpx;
			padding: 0 30rpx;
			background-color: #fff;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			box-sizing: border-box;
			z-index: 999;

			.test {
				height: 30rpx;
				background-color: #18BC37;
			}

			.ptitle {
				padding: 32rpx 0;
			}

			.plist0 {
				height: 600rpx;
			}

			.plist {
				height: 570rpx;

				// overflow-y: auto;
				// &>view:not(:first-child) {
				// 	margin-top: 20rpx;
				// }
				.plist-scroll {
					width: 690rpx;
					height: 570rpx;

					.plist2 {
						margin-bottom: 20rpx;
						width: 690rpx;
						height: 186rpx;
						padding: 23rpx 0;
						background: #FFFFFF;
						border: 1rpx solid #FD9D9D;
						border-radius: 10rpx;
						box-sizing: border-box;

						.lleft {
							width: 162rpx;
							height: 140rpx;
							padding: 0 0 0 30rpx;
							justify-content: center;
							align-items: flex-start;
							box-sizing: border-box;
							border-right: 1rpx dashed #CCCCCC;
						}

						.lright {
							flex: 1;
							position: relative;
							min-height: 140rpx;
							align-items: flex-start;
							padding: 0 30rpx 0 30rpx;

							// background-color: #007AFF;
							.two {
								margin: 26rpx 0;
							}

							.three {
								height: 30rpx;

								.three-desc {
									width: 420rpx;
								}

								.three-icon {
									width: 25rpx;
									height: 12rpx;

									image {
										width: 100%;
										height: 100%;
										// width: 25rpx;
										// height: 12rpx;
									}
								}
							}

							.lright-lq {
								position: absolute;
								right: 30rpx;
								top: 50%;
								transform: translateY(-50%);
								width: 130rpx;
								height: 44rpx;
								text-align: center;
								line-height: 44rpx;
								font-size: 26rpx;
								color: #F83535;
								background: #FFFFFF;
								border: 1rpx solid #F83535;
								border-radius: 22rpx;
								z-index: 6;
							}
						}
					}
				}

			}

			.pnone {
				text-align: center;

				.img {
					margin: 110rpx auto 0;
					width: 376rpx;
					height: 329rpx;
					margin-bottom: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.desc {}
			}
		}
	}
</style>
